<template>
    <div class="">
        <h4 class="margin_bottom20">数据库表列表</h4>
        <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="12">
                <el-button type="primary" size="small" @click="generate">
                    <i class="iconfont icon-plus"></i>生成代码</el-button>
                <!--<el-button type="primary" size="small" @click="delete" icon="delete">删除</el-button>-->
            </el-col>
            <el-col :span="6">
                <el-input placeholder="搜索..." size="small" v-model="searchKey">
                    <el-button slot="append" icon="search" @click="loadData"></el-button>
                </el-input>
            </el-col>
        </el-row>
        <template>
            <el-table :data="tableData" border style="width: 100%; text-align: center;margin-top:10px;" v-loading.body="loading" @selection-change="handleSelectionChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="tableName" header-align="center" label="表名"></el-table-column>
                <el-table-column prop="engine" header-align="center" label="数据库引擎"></el-table-column>
                <el-table-column prop="tableComment" header-align="center" label="表注释"></el-table-column>
                <el-table-column prop="createTime" header-align="center" label="创建时间"></el-table-column>

            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20,50,100,200]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </template>

    </div>
</template>
<script>
import Editor from '../../components/editor.vue'
export default {
	data() {
		return {
			tableData: [],
			currentPage: 1,
			total: 0,
			limit: 20,
			searchKey: '',
			loading: false,
			table: {
				tableName: '',
				engine: '',
				tableCommnet: '',
				createTime: '',
			},
			formLabelWidth: '120px',
			multipleSelection: [],
		}
	},
	methods: {
		handleSizeChange(val) {
			this.limit = val
			this.loadData()
		},

		//currentPage 改变时会触发
		handleCurrentChange(val) {
			// console.log(currentPage);
			this.currentPage = val
			this.loadData()
		},
		loadData() {
			this.loading = true
			this.$http
				.get(API.rootPath + '/tables', {
					params: {
						offset: this.limit * (this.currentPage - 1),
						limit: this.limit,
						searchKey: this.searchKey,
						companyId: localStorage.companyId,
					},
				})
				.then(
					response => {
						this.tableData = response.body.data.rows
						this.total = response.body.data.total

						this.loading = false
					},
					response => {
						// error callback
					},
				)
		},

		generate() {
			let tableNames = ''
			this.multipleSelection.forEach(select => {
				tableNames = tableNames + select.tableName + ','
			})
			this.$http
				.post(API.rootPath + '/generate', '', {
					params: { tableNames: tableNames },
				})
				.then(
					response => {},
					response => {
						// error callback
					},
				)
		},
		handleSelectionChange(val) {
			this.multipleSelection = val
		},
	},
	//引入文本编辑器那个组件
	components: {
		'v-editor': Editor,
	},
	created() {
		this.loadData()
	},
}
</script>
<style>
.el-dialog--small {
	width: 60%;
}
</style>
